<template>
	<div>
		<!-- 问题描述 -->
		<div style="margin-top: 10%;" @longpress="delQuestion()">
			<div style="margin-left: 2%;">
				问题描述: {{ question }}
			</div>
			<div style="display: flex;margin-left: 2%;margin-top: 2%;">
				<div>
					问题详情:
				</div>
				<div v-html="question_detail" style="margin-left: 2%;">
				</div>
			</div>
			
			<van-divider />
			<div v-if="question_url.length > 0">
				<div style="margin-left: 2%;margin-bottom: 10px;">
					问题辅助材料:
				</div>
				<div v-for="item in question_url" :key="item" style="width: 95%;margin: auto;">
					<!-- 判断是图片 -->
					<img v-if="item.questionMaterialUrl.endsWith('jpg')" :src="item.questionMaterialUrl"
						style="width: 100%;" />
					<img v-if="item.questionMaterialUrl.endsWith('png')" :src="item.questionMaterialUrl"
						style="width: 100%;" />
					<div v-if="item.questionMaterialUrl.includes('mp4')">
						<video :src="item.questionMaterialUrl" style="width: 100%;"></video>
					</div>
					<div v-if="!item.questionMaterialUrl.includes('jpg') && !item.questionMaterialUrl.includes('png') && !item.questionMaterialUrl.includes('mp4')"
						style="display: flex;" @click="openFile(item.questionMaterialUrl)">
						<img src="https://czsc.oss-cn-beijing.aliyuncs.com/qdimgs/files.png"
							style="width: 30px;height: 30px" />
						<p style="margin-top: 1.5%;">{{ item.questionMaterialName }}</p>
					</div>
				</div>
			</div>
		</div>
		<van-divider />
		<div style="font-size: 13px;float: right;">
			<div style="margin-bottom: 5%;">
				提问人:{{ question_user }}
			</div>
			<div style="margin-right: 3px;">
				提问时间: {{ question_time }}
			</div>
		</div>

		<div style="margin-top: 18%;padding-bottom: 30px;">
			<van-divider />
			<van-button type="primary" size="large" @click="answer()">我要回答</van-button>
		</div>

		<div>
			<van-overlay :show="show" >
				<div style="margin-top: 30%;height: 200px;">
					<van-field
					    v-model="ownertel"
					    rows="2"
					    autosize
					    label="回答"
					    type="textarea"
					    maxlength="50000"
					    placeholder="请输入回答"
					    show-word-limit
						@input="change1"
					  />
					</van-field>
					<div style="padding-top: 20%;background-color: #fff;width: 100%;height: 100px;">
						<van-button style="margin-left: 60%;" slot="button" size="small" custom-class="button" @click="cancal()">取消</van-button>
						<van-button style="margin-left: 2%;" slot="button" size="small" type="info" custom-class="button" @click="addAnswer()">提交</van-button>
					</div>
					 
				</div>
			</van-overlay>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				question_id: '',
				question: '',
				question_detail: '',
				question_user: '',
				question_time: '',
				question_url: [],
				windowWidth: "0",
				show: false,
				ownertel: '',
				question_userid: ''
			}
		},
		onLoad: function(option) {
			this.question_id = option.id;
			this.question = option.question;
			this.question_user = option.question_user;
			this.question_time = option.question_time;
			this.question_userid = option.question_userid;
			this.question_detail = option.question_detail;
			uni.request({
				method: 'POST',
				url: 'https://www.gjegm.ltd/czsczq/expertQuestionMaterial/getMaterilUrl',
				data: {
					uuid: this.question_id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'token': uni.getStorageSync('token')
				},
				success: (res) => {
					this.question_url = res.data.obj
				}
			});
		},
		created() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.windowWidth = res.screenWidth
				}
			})
		},
		methods: {
			change1(event) {
				this.ownertel = event.detail;
			},
			openFile(val) {
				uni.downloadFile({
					url: val,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			answer() {
				this.show = true;
			},
			cancal(){
				this.ownertel = '';
				this.show = false;
			},
			addAnswer(){
				if (this.ownertel === ''){
					uni.showToast({
						title: '回答不可为空!',
						mask: true,
						icon: 'none'
					});
				}else {
					uni.request({
						method: 'POST',
						url: 'https://www.gjegm.ltd/czsczq/expertAnswer/submitAnswer',
						data: {
							username: uni.getStorageSync('username'),
							userid: uni.getStorageSync('userid'),
							answer: this.ownertel,
							questionid: this.question_id
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							if (res.data.obj){
								this.show = false;
								uni.showToast({
									title: '回答成功!',
									mask: true,
									icon: 'none'
								});
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}
						}
					});
				}
				
			},
			delQuestion(){
				const question_id = this.question_id;
				if (this.question_userid === uni.getStorageSync('userid')){
					uni.showModal({
					    title: '提示',
					    content: '是否删除问题',
					    success: function (res) {
					        if (res.confirm) {
					            uni.request({
					            	method: 'POST',
					            	url: 'https://www.gjegm.ltd/czsczq/expertQuestion/delQuestionById',
					            	data: {
					            		id: question_id
					            	},
					            	header: {
					            		'content-type': 'application/x-www-form-urlencoded',
					            		'token': uni.getStorageSync('token')
					            	},
					            	success: (res) => {
					            		if (res.data.obj) {
					            			uni.navigateBack({
					            				delta: 1
					            			});
					            			uni.showToast({
					            				title: '删除成功!',
					            				mask: true,
					            				icon: 'none'
					            			});
					            		}
					            	}
					            });
					        } else if (res.cancel) {}
					    }
					});
				}else {
					uni.showToast({
						title: '您不可删除别人的问题!',
						mask: true,
						icon: 'none'
					})
				}
			},
			test(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
</style>
